﻿@{
    Layout = "_Layout";
    ViewData["Title"] = "元数据字段表";
}
@section Styles {
    <link rel="stylesheet" href="~/codemirror-5.65.11/lib/codemirror.css">
    <link rel="stylesheet" href="~/codemirror-5.65.11/addon/fold/foldgutter.css" />
    <link rel="stylesheet" href="~/codemirror-5.65.11/addon/display/fullscreen.css" />
    <link href="~/codemirror-5.65.11/theme/idea.css" rel="stylesheet" />
}
<el-container>
    <avue-crud :data="tableData" :option="option" :permission="hasPermission" :page.sync="pageOption" :table-loading="loading"
               v-on:refresh-change="refreshChange"
               v-on:row-save="handleRowSave"
               v-on:row-update="handleRowUpdate"
               v-on:row-del="handleRowDel"
               v-on:search-change="searchChange"
               v-on:search-reset="resetChange"
               :cell-style="cellStyle"
               @* :before-open="beforeOpen" *@
               @* v-model="form" *@
               v-on:on-load="onLoad">


        <template slot="menuLeft" slot-scope="{size}">
            <el-button type="success" :size="size"><a href="/filetemplate/entity" target="_blank">复制实体模板</a></el-button>
            <el-button type="warning" :size="size">复制接口模板</el-button>
        </template>

@*         <template slot-scope="{type,disabled}" slot="contentForm">
            <textarea id="result" name="result"></textarea>
        </template> *@
       
    </avue-crud>
</el-container>

@section Scripts {
    <script src="~/codemirror-5.65.11/lib/codemirror.js"></script>
    <script src="~/codemirror-5.65.11/addon/fold/foldcode.js"></script>
    <script src="~/codemirror-5.65.11/addon/fold/foldgutter.js"></script>
    <script src="~/codemirror-5.65.11/addon/fold/brace-fold.js"></script>
    <script src="~/codemirror-5.65.11/addon/fold/xml-fold.js"></script>
    <script src="~/codemirror-5.65.11/addon/fold/indent-fold.js"></script>
    <script src="~/codemirror-5.65.11/addon/fold/markdown-fold.js"></script>
    <script src="~/codemirror-5.65.11/addon/fold/comment-fold.js"></script>
    <script src="~/codemirror-5.65.11/mode/javascript/javascript.js"></script>
    <script src="~/codemirror-5.65.11/mode/xml/xml.js"></script>
    <script src="~/codemirror-5.65.11/mode/css/css.js"></script>
    <script src="~/codemirror-5.65.11/mode/htmlmixed/htmlmixed.js"></script>
    <script src="~/codemirror-5.65.11/mode/python/python.js"></script>
    <script src="~/codemirror-5.65.11/mode/markdown/markdown.js"></script>
    <script src="~/codemirror-5.65.11/mode/go/go.js"></script>
    <script src="~/codemirror-5.65.11/mode/php/php.js"></script>
    <script src="~/codemirror-5.65.11/mode/lua/lua.js"></script>
    <script src="~/codemirror-5.65.11/addon/mode/loadmode.js"></script>
    <script src="~/codemirror-5.65.11/addon/display/fullscreen.js"></script>
    <script src="~/codemirror-5.65.11/addon/selection/active-line.js"></script>
    <script src="~/codemirror-5.65.11/mode/vue/vue.js"></script>
    <script src="~/codemirror-5.65.11/mode/yaml/yaml.js"></script>
    <script src="~/codemirror-5.65.11/mode/clike/clike.js"></script>
    <script>
        var typeDicData = [{ label: `实体`, value: '1' }, { label: `接口`, value: '2' },];
        var editTypeDicData = [{ label: `csharp`, value: "0" }, { label: `javascript`, value: "1" }, { label: `typescript`, value: "2" },];
        new Vue({
            el: '#main',
            mixins: [curdMixin],
            data() {
                return {

                    name: "FileTemplate",
                    pageUrl: `/FileTemplate/pages`,
                    addUrl: `/FileTemplate/add`,
                    editUrl: `/FileTemplate/update`,
                    deleteUrl: `/FileTemplate/delete`,

                    option: {
                        searchShowBtn: Permissions.avePermission(`FileTemplate:searchBtn`),
                        refreshBtn: Permissions.avePermission(`FileTemplate:searchBtn`),
                        menuWidth: '580',
                        lableWidth: '120',
                        rowKey: 'id',
                        searchShow: false,
                        column: [
                            { prop: "id", label: `${this.i18n.t('primary_key')}`, search: false, hide: true, type: "number", display: false, showColumn: false, },
                            { prop: "name", label: `名称`, slot: true, search: true,span:24, hide: false, width: '260', clearable: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                            { prop: "type", label: `类型`, slot: true, search: true, span: 24, hide: false, width: '70', clearable: true, type: "select", button: true, dicData: typeDicData, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                            { prop: "editType", label: `编辑框样式`, slot: true, span: 24, search: true, hide: false, width: '120', clearable: true, type: "select", button: true, dicData: editTypeDicData, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                            { prop: "buildPath", label: `生成路径`, slot: true, span: 24, search: true, hide: false, value: '{project}\Models\{0}.cs', clearable: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                            { prop: "content", label: `模版内容`, slot: true, span: 24, search: false, formslot: true, hide: true, type: "textarea",rows: 12, clearable: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                        ],
                    },
                    form:{},
                }
            },
            created() {
                this.selectRow = {};
            },
            methods: {
                resultEdit(v) {
                    var te = document.getElementById("result");
                   
                    if (!te) {
                        console.error("无法找到代码编辑区域");
                        return;
                    }
                    if(v)
                     te.value=v;
                    this.resultEditor = CodeMirror.fromTextArea(te, {
                        mode: this.selectedLanguage,
                        lineNumbers: true,
                        lineWrapping: true,
                        foldGutter: true,
                        styleActiveLine: true,
                        matchBrackets: true,
                        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
                        extraKeys: {
                            "Ctrl-Q": function (cm) {
                                cm.foldCode(cm.getCursor());
                            },
                            "F11": function (cm) {
                                cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                            },
                            "Esc": function (cm) {
                                if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                            }
                        }
                    });
                },
                beforeOpen(done, type, loading){
                    if (["view", "edit"].includes(type)) {
                      /* loading() */;
                      this.resultEdit(this.form.content);
                      console.log("this.form.content",this.form.content)
                      done();
                    } else {
                      this.resultEdit();
                      done();
                    }
                    
                },
                cellStyle({ row, column, rowIndex, columnIndex }) {
                    if (columnIndex == 7) {
                        if (row.isDisable == 0) {
                            return { color: '#409eff', }
                        }
                        else {
                            return { color: '#f56c6c', }
                        }
                    }
                },
            }
        });
    </script>

}